/* 
 * 设置页面主体样式
 * 包括字体、外边距、内边距和背景颜色等基础布局属性
 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

/* 
 * 页面头部导航栏样式
 * 使用 Flex 布局实现左右对齐效果，并设置背景色和文字颜色
 */
.header {
    background-color: #2c3e50;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 
 * 头部链接样式
 * 统一设置链接的颜色、去除下划线并控制间距
 */
.header a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

/* 
 * 主容器样式
 * 控制最大宽度、水平居中显示以及内外边距
 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 
 * 特殊容器样式（用于顶部区域）
 * 全宽展示，固定高度并设置垂直方向上的内边距
 */
.container0 {
    max-width: 100%;
    padding: 15px;
    height: 20px;
}

/* 
 * 标题条样式
 * 显示通知信息或标题内容，具有醒目的背景色和居中文本
 */
.title-bar {
    background-color: #ffcccc;
    color: #333;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    margin-bottom: 20px;
    width: 100%;
}

/* 
 * 表格整体样式
 * 宽度占满父元素，合并边框并使用固定列宽布局方式
 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 
 * 表头单元格样式
 * 设置文本加粗、左对齐及相对定位以便扩展功能
 */
th {
    color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 10px;
    text-align: left;
    /* 背景只覆盖文字区域，不占满单元格 */
    position: relative;
    padding-left: 10px;
}

/* 
 * 高亮表头文字背景色
 * 应用于特定类名以突出显示某些表头字段
 */
.se {
    background-color: #b6b6b6;
}

/* 
 * 数据单元格通用样式
 * 设置统一的内边距、宽度比例、顶部对齐和居中显示文本
 */
td {
    padding: 10px;
    /* border: 1px solid #818181;下表格边框颜色 */
    width: 33.33%;
    vertical-align: top;
    /* 内容靠上对齐 */
    text-align: center;
    /* 文字居中 */
}

/* 
 * 表单容器样式
 * 居中显示并设定最大宽度，提供圆角和浅灰色背景
 */
.form-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 0px;
    border-radius: 8px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

/* 
 * 表单区块标题样式
 * 显示各部分名称，带缩进、背景色和底部边框分隔视觉层次
 */
.section-title {
    font-size: 16px;
    color: #333;
    margin: 2px 0 10px;
    padding: 5px 0px;
    /* 文字与边界的间隔 */
    text-indent: 20px;
    background-color: #e0dfdf;
    border-bottom: 1px solid #ddd;
    width: 100%;
    min-width: 1200px;
    height: 40px;
    line-height: 40px;
}

/* 
 * 表单项组布局样式
 * 使用弹性盒子模型横向排列标签和输入控件
 */
.form-group {
    display: flex;
    margin-bottom: 15px;
}

/* 
 * 输入项标签样式
 * 固定宽度、蓝绿色背景、白色字体并强调加粗显示
 */
.label {
    width: 150px;
    background-color: #00ccff;
    color: white;
    padding: 10px;
    /* text-align: center; */
    font-weight: bold;
    /* border-radius: 4px; */
}

/* 
 * 输入控件容器样式
 * 自适应剩余空间，黄色背景配合描边和圆角设计
 */
.input-group {
    flex: 1;
    padding: 10px;
    background-color: #fff9c4;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* 
 * 输入框基本样式
 * 设定百分比宽度、描边、圆角及盒模型适配
 */
.input-field {
    width: 60%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 
 * 输入框聚焦状态样式
 * 移除默认轮廓线并将边框高亮为蓝色
 */
.input-field:focus {
    outline: none;
    border-color: #00ccff;
}

/* 
 * 单选按钮组合容器样式
 * 水平排列选项并保持一定间距
 */
.radio-group {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

/* 
 * 单个单选按钮选项样式
 * 对齐图标与文字并保留适当空隙
 */
.radio-option {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 
 * 单选按钮外观样式
 * 圆形图形、灰色边框并支持点击交互
 */
.radio-button {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
}

/* 
 * 已选中的单选按钮样式
 * 更改填充颜色和边框颜色表示当前选择状态
 */
.radio-button:checked {
    background-color: #00ccff;
    border-color: #00ccff;
}

/* 
 * 单选按钮文字描述样式
 * 小字号便于阅读并与按钮形成良好搭配
 */
.radio-label {
    font-size: 14px;
}

/* 
 * 注释说明文字样式
 * 提供辅助性提示信息，采用小号字体和淡灰色调
 */
.note {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    line-height: 1.5;
}

/* 
 * 按钮组件样式（第一版）
 * 中心化显示、红色背景、悬停变色动画增强用户体验
 */
.button {
    display: block;
    width: 120px;
    height: 40px;
    background-color: #e91e63;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin: 20px auto;
    transition: background-color 0.3s ease;
}

/* 
 * 按钮悬停时的状态变化
 * 改变为橙红色背景提升交互反馈感
 */
.button:hover {
    background-color: #d84315;
}

/* 
 * 页面底部版权信息样式
 * 居中排版、极小字号和浅灰色彩营造低调存在感
 */
.footer {
    text-align: center;
    font-size: 10px;
    color: #999;
    margin-top: 20px;
}

/* 
 * 按钮组件样式（第二版）
 * 同样为中心化显示但使用更深红作为主色调
 */
.button {
    display: block;
    width: 120px;
    height: 40px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin: 20px auto;
    transition: background-color 0.3s ease;
}

/* 
 * 按钮悬停时的状态变化（第二版）
 * 同样切换至橙红色背景进行响应反馈
 */
.button:hover {
    background-color: #d84315;
}

/* 
 * 字段行容器样式
 * 控制多个相关输入字段间的垂直间距
 */
.field-row {
    margin-bottom: 5px;
}

/* 
 * 字段标签样式
 * 行内块级元素、固定宽度并预留右侧空白
 */
.field-label {
    display: inline-block;
    width: 30px;
    margin-right: 10px;
}

/* 
 * 名称字段集合样式
 * 占据整行宽度以容纳多个子字段
 */
.name-fields {
    width: 100%;
}
